<template>
  <div>
    <!-- 头部 -->
    <a-form ref="formRef" :rules="rules" :model="form" :hideRequiredMark="true">
      <a-row>
        <a-col :span="6">
          <a-range-picker
            v-model:value="form.date"
            style="width: 100%"
            :ranges="ranges"
            show-time
            format="YYYY/MM/DD HH:mm:ss"
            @change="panelChange"
          />
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item name="status">
            <a-select
              ref="select"
              v-model:value="form.status"
              @focus="focus"
              @change="handleChange"
              placeholder="请选择状态"
            >
              <a-select-option
                v-for="item in statusList"
                :value="item.name"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" :offset="1">
          <a-form-item name="inputValue">
            <a-input
              v-model:value="form.inputValue"
              placeholder="请输入搜索内容"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="search">搜索</a-button></a-col
        >
      </a-row>
    </a-form>

    <!-- 列表 -->
    <a-table
      :columns="columns"
      :data-source="dataSource"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #img="{ record }">
        <img :src="record.img" alt="" class="img" />
      </template>
      <template #operation="{ record }">
        <a-button
          type="link"
          @click="look(record.key)"
          v-has="{ a: $route, b: 1 }"
          >查看详情</a-button
        >
        <a-button
          type="link"
          @click="deal(record.key)"
          v-has="{ a: $route, b: 2 }"
          >处理</a-button
        >
      </template>
    </a-table>

    <!-- 查看弹窗 -->
    <a-modal
      v-if="visible"
      v-model:visible="visible"
      title="报警信息"
      @ok="handleOk"
      width="50%"
    >
      <a-row>
        <a-col :span="4" class="title">姓名</a-col>
        <a-col :span="4">江小白</a-col>
        <a-col :span="4" :offset="4" class="title">报警时间</a-col>
        <a-col :span="4">2021.12.23</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="title">报警定位</a-col>
        <a-col :span="20"> 抱歉！我不在地球上，你也定位不到我的位置的 </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="title">报警手机号</a-col>
        <a-col :span="4">11122222222</a-col>
        <a-col :span="4" :offset="4" class="title">紧急联系电话</a-col>
        <a-col :span="4">120</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="title">报警原因</a-col>
        <a-col :span="20">今天有点不太开心哦~</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="title">状态</a-col>
        <a-col :span="4"> <a-tag color="error">未处理</a-tag></a-col>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
import {
  reactive,
  ref,
  watch,
  computed,
  defineComponent,
  createVNode,
} from "vue";
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import { useModal } from "@/hooks"
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
  },
  setup() {
    const formRef = ref("");
    const form = reactive({
      inputValue: "",
      date: "",
    });
    const rules = {
      inputValue: [
        { required: true, message: "请输入搜索内容!", trigger: "blur" },
      ],
    };

    const loading = ref(false); //表格的加载

    const visible = ref(false);

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 5,
    });

    // 状态列表
    const statusList = reactive([
      {
        name: "已处理",
        id: 1,
      },
      {
        name: "未处理",
        id: 1,
      },
    ]);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = (e) => {
      console.log(e);
      visible.value = false;
    };

    // 查询
    const search = () => {
      console.log(form, "表单内容");
      formRef.value
        .validate()
        .then(() => {
          console.log("values", formState, toRaw(formState));
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    // 选择时间
    const panelChange = (date, dateString) => {
      console.log("选择的时间是", dateString);
      form.date = dateString;
    };

    const columns = [
      {
        title: "序号",
        dataIndex: "id",
        className: "table",
        align: "center",
      },
      {
        title: "姓名",
        dataIndex: "username",
        className: "table",
        align: "center",
      },
      {
        title: "报警时间",
        dataIndex: "date",
        className: "table",
        ellipsis: true,
        align: "center",
        sorter: true,
      },
      {
        title: "报警定位",
        dataIndex: "address",
        className: "table",
        align: "center",
        ellipsis: true,
      },
      {
        title: "报警手机号",
        dataIndex: "phone",
        className: "table",
        align: "center",
      },
      {
        title: "报警原因",
        dataIndex: "reason",
        className: "table",
        align: "center",
      },
      {
        title: "紧急联系电话",
        dataIndex: "emergencyPhone",
        className: "table",
        align: "center",
      },
      {
        title: "状态",
        dataIndex: "status",
        className: "table",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        align: "center",
        fixed: "right",
        slots: {
          customRender: "operation",
        },
      },
    ];
    const dataSource = [];

    for (let i = 0; i < 20; i++) {
      dataSource.push({
        key: i + 2,
        id: i + 1,
        username: "John Brown",
        date: "18888888888",
        address: "抱歉！我不在地球上，你也定位不到我的位置的",
        phone: "2021.12.21",
        reason: "不开心了",
        emergencyPhone: 122222,
        status: "未处理",
      });
    }

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: 0,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;

      // 请求列表接口
    };

    // 查看
    const look = (key) => {
      visible.value = true;
    };

    // 处理
    const deal = (key) => {
      const {closeModal} = useModal.confirm({
        title: () => "确定已经处理了吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
      });
    };
    return {
      formRef,
      form,
      rules,
      dataSource,
      columns,
      loading,
      pagination,
      statusList,
      visible,
      handleTableChange,
      search,
      panelChange,
      deal,
      look,
      showModal,
      handleOk,
    };
  },
};
</script>
<style scoped lang="less">
.img {
  width: 50px;
  height: 50px;
}
.title {
  font-weight: bold;
}
.ant-row {
  margin-bottom: 20px;
}
</style>
